<template>
	<view>
		<view class="container">
			<view class="p30 flex-box m-hairline--bottom" @click="chooseImage()">
				<view class="flex-1 fs30 col-3">点击更换头像</view>
				<image class="img-head" :src="userinfo.avatar" mode="aspectFill"></image>
			</view>
			<view class="p30 flex-box m-hairline--bottom">
				<view class="fs30 col-3">昵称</view>
				<input class="flex-1 fs30 col-3 tr" v-model="userinfo.nickname" name="nickname" type="text" placeholder="请填写" placeholder-class="col-9" />
			</view>
			<view class="p30 flex-box m-hairline--bottom">
				<view class="fs30 col-3">电话</view>
				<input class="flex-1 fs30 col-3 tr" disabled="true" name="mobile" type="number" placeholder="请填写" placeholder-class="col-9" v-model="userinfo.mobile" />
			</view>
			<view class="p30 flex-box m-hairline--bottom">
				<view class="fs30 col-3">邮箱</view>
				<input class="flex-1 fs30 col-3 tr" name="email" type="text" placeholder="请填写" placeholder-class="col-9" v-model="userinfo.email" />
			</view>
			<!-- <navigator class="p30 flex-box m-hairline--bottom" url="#" hover-class="none">
				<view class="fs30 col-3">密码</view>
				<view class="flex-1 fs30 col-red tr">修改密码</view>
			</navigator> -->
			<button class="g-btn1 fs28" @click="save()">保存</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userinfo:{}
		};
	},
	onLoad(){
		this.fetchUserinfo()
	},
	methods: {
		fetchUserinfo(){
			this.$core.get({url:'xiluedu.user/info',data:{},success:(ret)=>{
				 this.userinfo = ret.data;
			}});
		},
		chooseImage() {
			let that = this;
		    uni.chooseImage({
		      count: 1,
		      success: res => {
		        let file = res.tempFiles[0];
				// #ifdef H5
				that.$core.uploadFileH5({
				  filePath: file.path,
				  success: (ret, response) => {
				    that.userinfo.avatar = ret.data.url;
				  }
				});
				//#endif
				//#ifdef MP-WEIXIN
		        that.$core.uploadFile({
		          filePath: file.path,
		          success: (ret, response) => {
		            that.userinfo.avatar = ret.data.url;
		          }
		        });
				//#endif
		      }
		    });
		},
		save(){
		  this.$core.post({url:'xiluedu.user/profile',data:{avatar: this.userinfo.avatar,nickname:this.userinfo.nickname,email:this.userinfo.email},success:(ret)=>{
		       uni.showToast({'title':"保存成功",icon:"none"})
		  }});
	  }
	}
};
</script>

<style scoped>
.img-head {
	display: block;
	width: 120rpx;
	height: 120rpx;
}
.g-btn1 {
	position: fixed;
	bottom: 70rpx;
	left: 30rpx;
	right: 30rpx;
	width: 690rpx;
}
</style>
